<template>
  <view>
    <van-popup :show="showDatetime" position="bottom" custom-style="height:auto" round @close="closePopup" z-index="999999">
      <view class="pad-30">
        <view class="flex-center-row">
          <input
            type="text"
            placeholder="请选择开始日期"
            :value="startTime"
            :disabled="true"
            @click="selectDataType('start')"
            class="search-input font-size-24 color-999 search-input-popup"
            :class="{ 'select-date': dateType == 'start' }"
          />
          <text class="margin-left-20 font-size-26"></text>
        </view>
        <van-datetime-picker
          :type="type"
          :value="currentDate"
          :max-date="maxDate"
          :show-toolbar="false"
          @cancel="closePopup"
          @confirm="datetimeConfirm"
          @change.native="changeDate"
          :filter="filter"
          :formatter="formatter"
        />
        <button class="confirm-date-btn color-FFFFFF font-size-26 margin-top-20" @click="confirmDate">完成</button>
      </view>
    </van-popup>
  </view>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    showDatetime: {
      type: Boolean,
      default: false
    },
    type: {
      type: String
    }
  },
  data() {
    return {
      dateSection: '',
      startTime: '',
      endTime: '',
      dateType: 'start',
      currentDate: new Date().getTime(),
      maxDate: new Date().getTime(),
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`
        }
        if (type === 'month') {
          return `${value}月`
        }
        if (type === 'day') {
          return `${value}日`
        }
        return value
      }
    }
  },
  mounted() {
    if (this.type === 'year-month') {
      this.startTime = moment().format('YYYY-MM')
    } else if (this.type === 'date') {
      this.startTime = moment().format('YYYY-MM-DD')
    }
  },
  methods: {
    closePopup() {
      this.$emit('update:showDatetime', false)
    },
    datetimeConfirm(val) {
      let date = moment(val.detail).format('YYYY-MM-DD')
      if (this.dateType == 'start') {
        this.startTime = date
      }
      this.showDatetime = false
    },
    selectDataType(type) {
      this.dateType = type
    },
    changeDate(event) {
      let arr = event.detail.getValues()
      let dateStr = arr.join('-').replace(/[\u4e00-\u9fa5]/g, '')
      if (this.dateType == 'start') {
        this.startTime = dateStr
      }
    },
    confirmDate() {
      this.$emit('update:showDatetime', false)
      this.$emit('confirmDate', this.startTime, this.endTime)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-input-popup {
  text-align: center;
  background: #ffffff;
  border-radius: 10rpx;
  padding-left: 0;
}

.select-date {
  border: 1px solid #1E53C3;
  color: #1E53C3;
}

.confirm-date-btn {
  width: 198rpx;
  height: 78rpx;
  line-height: 78rpx;
  background: #1E53C3;
  box-shadow: 0 2rpx 8rpx 0 rgba(56, 135, 220, 1.0);
  border-radius: 6rpx;
}
</style>
